<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>发现好物 - 社交商城</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            background-color: white;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .search-container {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 8px;
            border: 1px solid #eee;
            background-color: #f5f5f5;
            font-size: 14px;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 16px;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background-color: white;
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 60px;
            z-index: 99;
        }
        
        .filter-btn {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 14px;
            padding: 5px 8px;
            border-radius: 4px;
            background: none;
            border: none;
        }
        
        .filter-btn i {
            margin-left: 5px;
            font-size: 12px;
        }
        
        .filter-btn.active {
            color: #ff4d4f;
            background-color: #fff1f0;
        }
        
        .view-toggle {
            display: flex;
            gap: 8px;
        }
        
        .view-btn {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            background-color: #f5f5f5;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
        }
        
        .view-btn.active {
            background-color: #ff4d4f;
            color: white;
        }
        
        /* 商品列表容器 */
        .products-container {
            padding: 8px;
        }
        
        /* 列表视图 */
        .products-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        /* 网格视图 */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        /* 商品卡片基础样式 */
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            text-decoration: none;
            color: #333;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* 列表视图卡片样式 */
        .list-view .product-card {
            display: flex;
            height: 120px;
        }
        
        /* 网格视图卡片样式 */
        .grid-view .product-card {
            flex-direction: column;
            height: auto;
        }
        
        /* 商品图片容器 */
        .product-images {
            position: relative;
            flex-shrink: 0;
        }
        
        /* 列表视图图片 */
        .list-view .product-images {
            width: 120px;
            height: 120px;
        }
        
        /* 网格视图图片 */
        .grid-view .product-images {
            width: 100%;
            padding-top: 100%; /* 1:1 比例 */
        }
        
        /* 无图样式 */
        .no-image {
            background-color: #fafafa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ddd;
        }
        
        .no-image i {
            font-size: 40px;
        }
        
        /* 单图样式 */
        .single-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 多图样式 */
        .multi-images {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 2px;
        }
        
        .multi-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .multi-images .more-images {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 50%;
            height: 50%;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 商品信息容器 */
        .product-info {
            padding: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .product-info {
            padding: 10px;
        }
        
        /* 商品标题 */
        .product-title {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-view .product-title {
            font-size: 13px;
            -webkit-line-clamp: 3;
        }
        
        /* 商品描述/标签 */
        .product-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 8px;
            flex-grow: 1;
        }
        
        .product-tag {
            font-size: 12px;
            color: #666;
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .grid-view .product-tags {
            margin-bottom: 5px;
        }
        
        /* 价格区域 */
        .product-price {
            font-size: 16px;
            font-weight: 600;
            color: #ff4d4f;
            margin-bottom: 4px;
        }
        
        .grid-view .product-price {
            font-size: 15px;
        }
        
        .original-price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            margin-left: 5px;
        }
        
        /* 额外信息 */
        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .sales-count {
            display: flex;
            align-items: center;
        }
        
        .sales-count i {
            font-size: 10px;
            margin-right: 3px;
        }
        
        .shop-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80px;
        }
        
        .grid-view .product-meta {
            margin-top: auto;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 6px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #ff4d4f;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        /* 加载更多 */
        .load-more {
            padding: 15px;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        
        .load-more-btn:hover {
            background-color: #f5f5f5;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: #999;
        }
        
        .empty-state i {
            font-size: 60px;
            margin-bottom: 15px;
            color: #eee;
        }
    </style>
</head>
<body class="list-view">
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索商品、店铺或标签...">
        </div>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <button class="filter-btn active">
            推荐 <i class="fas fa-chevron-down"></i>
        </button>
        <button class="filter-btn">
            最新 <i class="fas fa-chevron-down"></i>
        </button>
        <button class="filter-btn">
            价格 <i class="fas fa-chevron-down"></i>
        </button>
        <button class="filter-btn">
            销量 <i class="fas fa-chevron-down"></i>
        </button>
        <div class="view-toggle">
            <button class="view-btn active" id="list-view-btn">
                <i class="fas fa-list"></i>
            </button>
            <button class="view-btn" id="grid-view-btn">
                <i class="fas fa-th"></i>
            </button>
        </div>
    </div>
    
    <!-- 商品列表容器 -->
    <div class="products-container" id="products-container">
        <!-- 1. 无图商品 -->
        <a href="#" class="product-card">
            <div class="product-images no-image">
                <i class="fas fa-box"></i>
            </div>
            <div class="product-info">
                <h3 class="product-title">限量版 创意设计 个性定制 手写笔记本 可定制封面</h3>
                <div class="product-tags">
                    <span class="product-tag">文具</span>
                    <span class="product-tag">定制</span>
                    <span class="product-tag">创意</span>
                </div>
                <div class="product-price">
                    ¥59.00 <span class="original-price">¥79.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 238
                    </div>
                    <div class="shop-name">创意文具坊</div>
                </div>
            </div>
        </a>
        
        <!-- 2. 单图商品 -->
        <a href="#" class="product-card">
            <div class="product-images single-image">
                <img src="https://picsum.photos/id/26/400/400" alt="无线蓝牙耳机">
            </div>
            <div class="product-info">
                <h3 class="product-title">无线蓝牙耳机 主动降噪 长续航 高清通话 运动防水</h3>
                <div class="product-tags">
                    <span class="product-tag">电子</span>
                    <span class="product-tag">耳机</span>
                    <span class="product-tag">降噪</span>
                </div>
                <div class="product-price">
                    ¥299.00 <span class="original-price">¥399.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 1256
                    </div>
                    <div class="shop-name">数码生活馆</div>
                </div>
            </div>
        </a>
        
        <!-- 3. 多图商品 (3张) -->
        <a href="#" class="product-card">
            <div class="product-images">
                <div class="multi-images">
                    <img src="https://picsum.photos/id/96/400/400" alt="纯棉T恤图片1">
                    <img src="https://picsum.photos/id/21/400/400" alt="纯棉T恤图片2">
                    <img src="https://picsum.photos/id/22/400/400" alt="纯棉T恤图片3">
                    <div class="more-images">+3</div>
                </div>
            </div>
            <div class="product-info">
                <h3 class="product-title">夏季纯棉短袖T恤 宽松版型 多色可选 男女同款 透气舒适</h3>
                <div class="product-tags">
                    <span class="product-tag">服装</span>
                    <span class="product-tag">T恤</span>
                    <span class="product-tag">夏季</span>
                </div>
                <div class="product-price">
                    ¥89.00
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 3562
                    </div>
                    <div class="shop-name">潮流服饰店</div>
                </div>
            </div>
        </a>
        
        <!-- 4. 单图商品 -->
        <a href="#" class="product-card">
            <div class="product-images single-image">
                <img src="https://picsum.photos/id/42/400/400" alt="手工咖啡杯">
            </div>
            <div class="product-info">
                <h3 class="product-title">手工陶瓷咖啡杯 带盖带勺 大容量马克杯 创意礼品</h3>
                <div class="product-tags">
                    <span class="product-tag">家居</span>
                    <span class="product-tag">陶瓷</span>
                    <span class="product-tag">手工</span>
                </div>
                <div class="product-price">
                    ¥69.00 <span class="original-price">¥99.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 542
                    </div>
                    <div class="shop-name">匠心家居</div>
                </div>
            </div>
        </a>
        
        <!-- 5. 多图商品 (2张) -->
        <a href="#" class="product-card">
            <div class="product-images">
                <div class="multi-images">
                    <img src="https://picsum.photos/id/65/400/400" alt="智能手表图片1">
                    <img src="https://picsum.photos/id/68/400/400" alt="智能手表图片2">
                </div>
            </div>
            <div class="product-info">
                <h3 class="product-title">智能手表 心率监测 运动计步 睡眠分析 超长待机</h3>
                <div class="product-tags">
                    <span class="product-tag">数码</span>
                    <span class="product-tag">智能设备</span>
                    <span class="product-tag">运动</span>
                </div>
                <div class="product-price">
                    ¥399.00 <span class="original-price">¥499.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 876
                    </div>
                    <div class="shop-name">智能生活</div>
                </div>
            </div>
        </a>
        
        <!-- 6. 无图商品 -->
        <a href="#" class="product-card">
            <div class="product-images no-image">
                <i class="fas fa-gift"></i>
            </div>
            <div class="product-info">
                <h3 class="product-title">定制生日蛋糕 创意设计 新鲜水果 动物奶油 同城配送</h3>
                <div class="product-tags">
                    <span class="product-tag">食品</span>
                    <span class="product-tag">蛋糕</span>
                    <span class="product-tag">定制</span>
                </div>
                <div class="product-price">
                    ¥168.00
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 198
                    </div>
                    <div class="shop-name">甜蜜时光</div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" id="load-more-btn">
            加载更多 <i class="fas fa-spinner fa-spin" style="display: none;"></i>
        </button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-search"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-shopping-cart"></i>
            <span>购物车</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-heart"></i>
            <span>收藏</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视图切换功能
            const listViewBtn = document.getElementById('list-view-btn');
            const gridViewBtn = document.getElementById('grid-view-btn');
            const productsContainer = document.getElementById('products-container');
            const body = document.body;
            
            // 列表视图
            listViewBtn.addEventListener('click', function() {
                body.classList.remove('grid-view');
                body.classList.add('list-view');
                productsContainer.classList.remove('products-grid');
                productsContainer.classList.add('products-list');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
            });
            
            // 网格视图
            gridViewBtn.addEventListener('click', function() {
                body.classList.remove('list-view');
                body.classList.add('grid-view');
                productsContainer.classList.remove('products-list');
                productsContainer.classList.add('products-grid');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
            });
            
            // 筛选按钮交互
            const filterBtns = document.querySelectorAll('.filter-btn');
            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    filterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    // 在实际应用中，这里会触发筛选逻辑
                });
            });
            
            // 加载更多功能
            const loadMoreBtn = document.getElementById('load-more-btn');
            loadMoreBtn.addEventListener('click', function() {
                const spinner = this.querySelector('i');
                spinner.style.display = 'inline-block';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    // 复制现有商品作为新内容（实际应用中会从服务器请求）
                    const existingCards = document.querySelectorAll('.product-card');
                    const randomIndex = Math.floor(Math.random() * existingCards.length);
                    const clone = existingCards[randomIndex].cloneNode(true);
                    
                    // 修改一些内容以模拟新商品
                    const randomId = Math.floor(Math.random() * 100);
                    const img = clone.querySelector('img');
                    if (img) {
                        img.src = `https://picsum.photos/id/${randomId}/400/400`;
                    }
                    
                    productsContainer.appendChild(clone);
                    
                    spinner.style.display = 'none';
                    this.disabled = false;
                }, 1500);
            });
            
            // 初始化视图
            productsContainer.classList.add('products-list');
        });
    </script>
</body>
</html>

